<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>

  <template id="my-app">
    <h2>{{info.name}}</h2>
    <button @click="changeInfo()">改变info</button>
    <button @click="changeInfoName()">改变info.name</button>
    <button @click="changeInfoNbaName()">改变info.nba.name</button>
  </template>

  <script src="../js/vue.js"></script>
  <script>
    const App = {
      template: "#my-app",
      data() {
        return {
          info: {
            name: "why",
            age: 18,
            nba: {
              name: "kobe"
            }
          },
        }
      },
      watch: {
        "info.name": function (newName, oldNmae) {
          console.log(newName, oldNmae);
        }
      },
      methods: {
        changeInfo() {
          this.info = { name: "kobe" };
        },
        changeInfoName() {
          this.info.name = "kobe";
        },
        changeInfoNbaName() {
          this.info.nba.name = "james"
        },
      },
      created() {
        const unwatch = this.$watch("info", (newValue, oldValue) => {
          console.log(newValue, oldValue);
        }, {
          deep: true,
          immediate: true,
        });

        // 取消侦听
        unwatch();
      }
    };

    Vue.createApp(App).mount("#app");
  </script>
</body>

</html>